<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
		<title>fwj08-3</title>
		<style type="text/css">
			:root {
				--main-bg-color: #590d4a;
				--main-element-color: #a31b88;
				--main-button-color: #33062a;
			}
			#paragraph {
				color: black;
				font-family: 'Oswald', sans-serif;
				font-size: 20px;
				background-color: var(--main-element-color);
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
			}
			.tabOption {
				background-color: #c631c1;
				width: 33.3%;
			}
			.tabOption:hover {
				background-color: var(--main-element-color-color);
				cursor: pointer;
			}
			body {
				background-color: var(--main-bg-color);
			}
			#content {
				padding: 20px;
				color: black;
				font-family: 'Oswald', sans-serif;
				font-size: 20px;
				background-color: var(--main-element-color);
				width: 100%;
			}
			
		</style>
	</head>
	<body>
		<div id="paragraph" float="top">
			<div class="tabOption" onclick="showContent(1)">Aba 1</div>
			<div class="tabOption" onclick="showContent(2)">Aba 2</div>
			<div class="tabOption" onclick="showContent(3)">Aba 3</div>
		</div>
		<br />
		<div id="content">lel</div>
		<br />
	</body>
</html>
<script lang="javascript" src="jquery-3.3.1.min.js"></script>
<script lang="javascript">
	var item1 = "<img src=\"800px-Ogham_Stone.jpg\" width=\"400\" width=\"800\">";
	var item2 = "<img src=\"Book_of_Ballymote_170v.jpg\" width=\"400\" width=\"800\">";
	var item3 = "<img src=\"800px-Ogham_map.png\" width=\"400\" width=\"800\">";
	function showContent(item){
		if (item === 1) {
			$("#content").html(item1);
		}
		else if (item === 2) {
			$("#content").html(item2);
		}
		else if (item === 3) {
			$("#content").html(item3);
		}
	}
</script>